<form {{action 'doSubmit' (hash plaintext=plaintext context=context nonce=nonce key_version=key_version encodedBase64=encodedBase64) on="submit"}}>
    <div class="box is-sideless is-fullwidth is-marginless">
      <NamespaceReminder @mode="perform" @noun="encryption" />
      <div class="content">
        <p>You can encrypt plaintext data using <code>{{key.name}}</code> as the encryption key.</p>
      </div>
      {{key-version-select
        key=key
        onVersionChange=(action (mut key_version))
        key_version=key_version
      }}
      <div class="field">
        <label for="plaintext" class="is-label">
          Plaintext
        </label>
        <div id="plaintext-control" class="control is-relative">
          {{ivy-codemirror
            value=plaintext
            valueUpdated=(action (mut plaintext))
            options=(hash
              lineNumbers=true
              tabSize=2
              mode='ruby'
              theme='hashi'
            )
            data-test-transit-input="plaintext"
          }}
        </div>
      </div>
      <div class="field">
        {{input type="checkbox" id="encodedBase64" checked=encodedBase64 data-test-transit-input="encodedBase64"}}
        <label for="encodedBase64">This data is already encoded in base64</label>
      </div>
      {{#if key.derived}}
        <div class="field">
          <label for="context" class="is-label">
            Context
          </label>
          <div class="field has-addons">
            <div class="control">
              {{input type="text" id="context" value=context class="input" data-test-transit-input="context"}}
            </div>
            <div class="control">
              {{b64-toggle value=context data-test-transit-b64-toggle="context"}}
            </div>
          </div>
        </div>
      {{/if}}
      {{#if (eq key.convergentEncryptionVersion 1)}}
        <div class="field">
          <div class="level">
            <div class="level-left">
              <label for="nonce" class="is-label">Nonce</label>
            </div>
            <div class="level-right">
              {{b64-toggle value=nonce data-test-transit-b64-toggle="nonce"}}
            </div>
          </div>
          <div class="control">
            {{input type="text" id="nonce" value=nonce class="input" data-test-transit-input="nonce"}}
          </div>
        </div>
      {{/if}}
    </div>
    <div class="field is-grouped box is-fullwidth is-bottomless">
      <div class="control">
        <button type="submit" class="button is-primary" data-test-button-encrypt>
          Encrypt
        </button>
      </div>
    </div>
</form>
<Modal
  @title="Copy your token"
  @onClose={{action (mut isModalActive) false}}
  @isActive={{isModalActive}}
  data-test-encrypt-modal>
  <section class="modal-card-body">
    <div class="box is-shadowless is-fullwidth is-sideless">
      <h2 class="title is-6">Ciphertext</h2>
      <div class="copy-text level">
        <code class="level-left" data-test-encrypted-value="ciphertext">{{ciphertext}}</code>
        <CopyButton
          class="button is-compact is-transparent level-right"
          data-test-button="modal-copy"
          @clipboardText={{ciphertext}}
          @buttonType="button"
          @success={{action (set-flash-message 'Ciphertext copied!')}}>
          <Icon @glyph="copy-action" aria-label="Copy" />
        </CopyButton>
      </div>
    </div>
  </section>
  <footer class="modal-card-foot">
    <CopyButton
      class="button is-primary copy-close"
      data-test-button="modal-copy-close"
      @clipboardText={{ciphertext}}
      @buttonType="button"
      @success={{action "toggleModal" "Ciphertext copied!"}}>
      Copy &amp; Close
    </CopyButton>
  </footer>
</Modal>
